<template>
	<view class="container">
		<view class="nav" :style="'height:'+TitleHeight+'px;'">
			<view class="menu" :style="'opacity:'+Opacity"></view>
			<view class="position" :style="'bottom:'+TitleBottom+'px'" @click="ToCity()"><view class="img"><image src="../../static/position2.png"/></view><view class="city">{{CityName}}</view></view>
			<view class="title" :style="'bottom:'+TitleBottom+'px'">首页</view>
		</view>
		<!-- 轮播区域 start-->
		<view class="poster_bg" style="">
			<view class="swiper">
				<swiper class="swiper" autoplay="true" interval="5000" duration="500" circular="true" indicator-dots="true" indicator-active-color="#ffffff">
					<swiper-item v-for="item in AdList1">
						<view class="swiper-item uni-bg-red" @click="ClickAd(item)"><image :src="Tools.GetImg(item.Img,1000)" mode="aspectFill"></image></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="panel">
			<view class="square" style="background:linear-gradient(to right,#f54875,#f54875);" @click="Matcher()"><view class="name">公益红娘</view><view class="small"><image src="/static/icon1.png"/></view></view>
			<view class="square" style="background:linear-gradient(to right,#e54480,#e54480);" @click="Active()"><view class="name">活动发布</view><view class="small"><image src="/static/icon2.png"/></view></view>
			<view class="square" style="background:linear-gradient(to right,#ff6684,#ff6684);" @click="YueHui()"><view class="name">寻觅佳缘</view><view class="small"><image src="/static/icon3.png"/></view></view>
			<view class="square" style="background:linear-gradient(to right,#fe436e,#fe436e);" @click="News()"><view class="name">新闻资讯</view><view class="small"><image src="/static/icon4.png"/></view></view>
		</view>
		<view class="poster_bg" style="margin-top:0rpx; height: 250rpx;">
			<view class="swiper2">
				<swiper class="swiper2" autoplay="true" interval="5000" duration="500" circular="true" indicator-dots="true" indicator-active-color="#ffffff">
					<swiper-item v-for="item in AdList2">
						<view class="swiper-item uni-bg-red" @click="ClickAd(item)"><image :src="Tools.GetImg(item.Img,1000)" mode="aspectFill"></image></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="person">
			<view class="squares" @click="User('女')" style="background:linear-gradient(to bottom,#fdbb9f,#fdd3c0);">
				<view class="left">
					<view class="t">女单身</view>
					<view class="b">寻找有缘人</view>
				</view>
				<view class="right">
					<view class="circle" v-for="item in GirlList"><image :src="Tools.GetImg(item.HeadImg,200)" mode="aspectFill"/></view>
				</view>
			</view>
			<view class="squares" @click="User('男')" style="background:linear-gradient(to bottom,#eed1a5,#ebdac0);">
				<view class="left">
					<view class="t">男单身</view>
					<view class="b">寻找有缘人</view>
				</view>
				<view class="right">
					<view class="circle" v-for="item in BoyList"><image :src="Tools.GetImg(item.HeadImg,200)" mode="aspectFill"/></view>
				</view>
			</view>
		</view>
		<view class="userlist" v-if="UserList.length>0">
			<view class="title"><view class="icon"></view><view class="name">单身推荐</view><view class="icon"></view></view>
			<view class="list" v-for="item in UserList" @click="UserInfo(item.ID)">
				<view class="headimg">
					<image :src="Tools.GetImg(item.HeadImg,500)" mode="aspectFill"/>
					<view class="identify">
						<view class="icon" v-if="item.IsRealName==1"><image src="https://yuehuiba.qiyedaishu.com/img/shiming.png"/></view>
						<view class="icon" v-if="item.IsSchool==1"><image src="https://yuehuiba.qiyedaishu.com/img/xueli.png"/></view>
						<view class="icon" v-if="item.IsCrime==1"><image src="https://yuehuiba.qiyedaishu.com/img/fanzui.png"/></view>
						<view class="icon" v-if="item.IsMarriage==1"><image src="https://yuehuiba.qiyedaishu.com/img/hunyin.png"/></view>
					</view>
				</view>
				<view class="info"><view class="realname">{{item.NickName}}</view><view class="sex"><image :src="'../../static/'+item.Sex.ToSex()"/></view><view class="age">{{item.Age}}岁</view></view>
				<view class="pos"><view class="city">{{item.WorkPlace}}</view><view class="distance">距我{{item.Distance}}</view></view>
			</view>
		</view>
		<view class="userlist" v-if="MatcherList.length>0" style="margin-top:50rpx;">
			<view class="title"><view class="icon"></view><view class="name">红娘推荐</view><view class="icon"></view></view>
			<view class="list" v-for="item in MatcherList" @click="MatcherInfo(item.ID)"> 
				<view class="headimg">
					<image :src="Tools.GetImg(item.HeadImg,500)" mode="aspectFill"/>
					<view class="isidentify" v-if="item.IsIdentify==1"><image src="https://yuehuiba.qiyedaishu.com/img/isidentify2.png"/></view>
				</view>
				<view class="info"><view class="realname">{{item.NickName}}</view><view class="sex"><image :src="'../../static/'+item.Sex.ToSex()"/></view><view class="age">{{item.Age}}岁</view></view>
				<view class="pos"><view class="city">{{item.RLivePlace}}</view><view class="distance">距我{{item.Distance}}</view></view>
			</view> 
		</view>
		<view class="notice" v-if="ShowNotice">
			<view class="icon"><image src="https://yuehuiba.qiyedaishu.com/img/notice.png"/></view>
			<view class="tip"><view class="big">你未开启消息通知</view><view class="small">开启后，实时接收最新消息</view></view>
			<view class="btn" @click="OpenNotice">去开启</view>
			<view class="close" @click="CloseNotice"><image src="/static/close.png"/></view>
		</view>
		<view class="dialog" v-if="ShowDialog">
			<view class="meng" @click="CloseDialog()"></view>
			<view class="care">
				<view class="close" @click="CloseDialog()"><image src="/static/close.png"></image></view>
				<view class="ewm" @click="GoCare()"><image src="https://yuehuiba.qiyedaishu.com/img/carewx.png?v=1"></image></view>
				<view class="btnlist"><view class="btn" @click="GoCare">点此去关注</view></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage: function() {
			var UserID = uni.getStorageSync("UserID");
		    return {
		      title: this.Title,
		      path: "pages/index/index?ParentID="+UserID//这是一个路径
		    } 
		},
		data() {
			return {
				Lat:0,
				Lng:0,
				Title:'',
				Keyword:'',
				CityName:'全国',
				AdList1:[],
				AdList2:[],
				BoyList:[],
				GirlList:[],
				UserList:[],
				MatcherList:[],
				ColorList:["#4682e9","#f99a4b","#e76a39","#776ae0","#ea59aa","#3b74da","#63bd77","#de412a","#367b9b","#8a2cc4"],
				Opacity:0,
				TitleHeight: 0,
				TitleBottom: 0,
				ShowDialog:false,
				ShowNotice:false
			};
		},
		onPageScroll(res) {
			this.Opacity=res.scrollTop/100;
		},
		onPullDownRefresh() {
			this.Find_Home();
		},
		onShow() {
			uni.$once("SelectCity",CityName=>{
				this.CityName=CityName;
				this.Find_Home();
			});
			this.Util.MatcherIsIdentify();
		},
		onLoad(options) {
			this.Util.SetParam(options); 
			var menu = this.Util.GetMenuHeight();
			this.TitleHeight = menu.height;
			this.TitleBottom = menu.bottom;
			
			if(uni.getStorageSync("CityName")){
				this.CityName=uni.getStorageSync("CityName");
			}
			this.Util.Loading("定位中，请稍候...");
			uni.getLocation({
			  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			  success: res=> {
			    this.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			    this.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。	
				this.Find_Home();
			  },
			  fail: res=>{
				  this.Find_Home();
			  }
			});
		},
		methods:{
			OpenNotice(){				
				var tmplid="-9h7QVAZE1BNRgepdF4YtoQKVylyeT2uPP8VP7OiAZ4";
				uni.requestSubscribeMessage({
				    tmplIds: [tmplid],
				    success: res=> {
						if(JSON.stringify(res).indexOf("reject") != -1){
						    uni.openSetting({
						      success(res) {
						        console.log(res.authSetting)
						      }
						    });
						} 
						if(JSON.stringify(res).indexOf("accept") != -1){
							uni.getSetting({
								withSubscriptions: true,
								success: res=> {
									if(JSON.stringify(res.subscriptionsSetting).indexOf(tmplid) != -1){
									   this.SaveAlwayAllow(1);
									}
								}
							});
						}
					}
				})
			},
			SaveAlwayAllow(AlwayAllow){
				var data = {};
				data.Act="Save_AlwayAllow";
				data.AlwayAllow=AlwayAllow;
				this.Util.Loading("请稍候...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					if(json.State){
						this.ShowNotice=false;
						//this.Util.Toast(json.Msg);
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			},
			CloseNotice(){
				this.ShowNotice=false;
			},
			GoCare(){
				this.ShowDialog=false;
				uni.navigateTo({
					url:'/pages/index/care'
				})
			},
			ToCity(){
				this.Util.AddPushCount();
				uni.navigateTo({
					url:'/pages/index/city'
				})
			},
			Matcher(){
				this.Util.AddPushCount();
				uni.switchTab({
					url:'/pages/matcher/matcherlist'
				})
			},
			Active(){
				this.Util.AddPushCount();
				uni.navigateTo({
					url:'/pages/active/activelist'
				})
			},
			YueHui(){
				this.Util.AddPushCount();
				uni.switchTab({
					url:'/pages/yuehui/yuehuilist'
				})
			},
			User(Sex){
				this.Util.AddPushCount();
				uni.navigateTo({
					url:'/pages/yuehui/userlist?Sex='+Sex
				})
			},
			UserInfo(ID){
				this.Util.AddPushCount();
				uni.navigateTo({
					url:'/pages/yuehui/yuehuiinfo?ID='+ID
				})
			},
			MatcherInfo(ID){
				this.Util.AddPushCount();
				uni.navigateTo({
					url:'/pages/matcher/matcherinfo?ID='+ID
				})
			},
			News(){
				this.Util.AddPushCount();
				uni.navigateTo({
					url:'/pages/news/newslist'
				})
			},
			Search(e){
				 uni.navigateTo({
				 	url:'/pages/darenku/searchlist?Keyword='+e.detail.value
				 })				
			},
			Find_Home(){
				var data = {};
				data.Act="Find_Home";
				data.Lat = this.Lat;
				data.Lng = this.Lng;
				data.CityName = this.CityName;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Title=json.Data.Title;
					this.AdList1 = json.Data.AdList1;
					this.AdList2 = json.Data.AdList2;
					this.BoyList = json.Data.BoyList;
					this.GirlList = json.Data.GirlList;
					this.UserList = json.Data.UserList;
					this.MatcherList = json.Data.MatcherList;
					if(uni.getStorageSync("Token")){
						this.ShowNotice = json.Data.AlwayAllow==0?true:false;
						this.ShowDialog = json.Data.ShowDialog;
					}					
				});
			},
			ClickAd(item){
				this.Util.AddPushCount();
				this.Util.AdSkip(item);
			},
			CloseDialog(){
				this.ShowDialog=false;
			},
			CloseNotice(){
				this.ShowNotice=false;
			},
			ClosePay(){
				this.ShowPay=false;
			}
			
		}
	}
</script>

<style lang="scss">
	page{background-image: url(https://yuehuiba.qiyedaishu.com/img/bg5.png); background-size: 100%; background-repeat: no-repeat;}
	.container{width:100%; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 120rpx;
		.homebg{width:750rpx; height:430rpx; background-size: 750rpx 430rpx; background-repeat: no-repeat; 
		}
		.swiper{position: relative; z-index:1;}
		.panel{width:100%; height:auto; margin-top:20rpx; padding-left:25rpx; padding-right: 25rpx; float:left; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
			.square{width:340rpx; height:150rpx; border-radius: 20rpx; margin-bottom: 20rpx;
				.name{width:160rpx; height:150rpx; line-height: 150rpx; float:left; padding-left:20rpx; font-size:34rpx; color:#ffffff;}
				.small{width:160rpx; height:150rpx; float:right; background-image: url(/static/i1.png); background-size: 100%; background-repeat: no-repeat; text-align: center; image{width:60rpx; height: 60rpx; margin-top:40rpx;}}
			}			
		}

		.person{width:100%; padding-left:25rpx; padding-right: 25rpx; float:left; margin-top:20rpx; float:left; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
			.squares{width:340rpx; height:220rpx; border-radius: 20rpx; margin-bottom: 20rpx; background-color: #ffffff;
				.left{width:190rpx; height:200rpx; float:left; padding-left:30rpx; padding-top:60rpx;
					.t{width:100%; height:50rpx; float:left; font-size:36rpx; font-weight: bold;}
					.b{width:100%; height:50rpx; float:left; font-size:28rpx;}
				}
				.right{width:150rpx; float:left; position: relative; margin-top:65rpx;
					.circle:first-child{width:80rpx; height:80rpx; border-radius: 40rpx; border:1rpx solid #ffffff; overflow: hidden; position: absolute; image{width:100%; height: 100%;}}
					.circle:last-child{width:80rpx; height:80rpx; border-radius: 40rpx; border:1rpx solid #ffffff; overflow: hidden; position: absolute; left:50rpx; image{width:100%; height: 100%;}}
				}
			}
		}
		.userlist{width:100%; height:auto; padding:25rpx; padding-top:10rpx; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
			.title{width:100%; height:77rpx; line-height: 40rpx; color:#c92b2f; padding-left:10rpx; margin-bottom: 10rpx; font-size:34rpx; font-weight: bold; display: flex; flex-direction: row; justify-content: center; 
				.icon{width:100rpx; height: 77rpx; background-image: url(/static/title.png); background-repeat: no-repeat; background-size: 60rpx; background-position: center center;}
				.name{width:auto; height: 77rpx; line-height: 77rpx; font-size:46rpx;}
			}
			.list{width:340rpx; height:470rpx; background-color: #ffffff; border-radius: 20rpx; margin-bottom: 20rpx; overflow: hidden;
				.headimg{width:340rpx; height:340rpx; position: relative; float:left; overflow: hidden; image{width:340rpx; height:340rpx; border-radius: 0rpx;}
					.identify{width:40rpx; height:auto; position:absolute; right:10rpx; bottom:10rpx;display: flex; flex-direction: column;
						.icon{width:40rpx; height:40rpx; margin-top:6rpx; image{width:40rpx; height:40rpx; border-radius: 10rpx;}}
					}	
					.isidentify{position: absolute; left:10rpx; top:10rpx; z-index: 99; image{width:50rpx; height:50rpx;}}
				}
				.info{width:100%; height:70rpx; padding:10rpx; padding-top:15rpx; float:left;
					.realname{width:auto; float:left; font-weight: bold; font-size:34rpx;}
					.sex{width:30rpx; height:30rpx; float:left; margin-left:10rpx; margin-top:5rpx; image{width:100%; height:100%; border-radius: 0rpx;}}
					.age{width:auto; height:30rpx; float:right; font-size:28rpx; color:#757575;}
				}
				.pos{width:100%; height:40rpx; padding-left:10rpx; padding-right: 10rpx; float:left; display: flex; flex-direction: row; justify-content: space-between;
					.city{width:auto; height:40rpx; line-height: 40rpx; padding-left:8rpx; padding-right: 8rpx; border-radius: 6rpx; font-size:28rpx; background-color: #ff5732; color:#ffffff; }
					.distance{flex:1; min-width:175rpx; height:40rpx; line-height: 40rpx; font-size:26rpx; color:#757575; text-align: right;}
				}
			}
		}
	}
	image/*图片*/{border-radius: 20rpx;}
	.poster_bg/*轮播区*/{flex-direction: column;/*垂直排列*/width: 750rpx; height: 300rpx; padding-left:25rpx; margin-top:180rpx; border-radius: 14rpx;
		// #ifdef H5
		margin-top:20rpx !important;
		// #endif 
	}
	.poster/*海报*/{height: 300rpx;width: 700rpx;border-radius: 14rpx;}
	.navbg/*轮播条*/{display: flex;/*定义弹性布局*/justify-content: center;/*水平居中对齐*/}
	.swiper{width:700rpx; height:300rpx; border-radius: 14rpx;
		swiper-item{width:100%; height:300rpx; border-radius: 14rpx;
			.swiper-item{width:100%; height:300rpx; border-radius: 14rpx;}
		}
		image{width:100%;height:300rpx; border-radius: 10rpx; overflow:hidden;}
	}
	.swiper2{width:700rpx; height:250rpx; border-radius: 14rpx;
		swiper-item{width:100%; height:250rpx; border-radius: 14rpx;
			.swiper-item{width:100%; height:250rpx; border-radius: 14rpx;}
		}
		image{width:100%;height:250rpx; border-radius: 10rpx; overflow:hidden;}
	}
	.notice{width:100%; height:120rpx; padding-left:30rpx; padding-right: 80rpx; position: relative; background-color: #b41009; display: flex; flex-direction: row; position: fixed; left:0rpx; bottom:0rpx;
		.icon{width:60rpx; height:60rpx; margin-top:30rpx; image{width:100%; height:100%;}}
		.tip{flex:1; height:120rpx; padding-left:20rpx; color:#ffffff; .big{width:100%; height:60rpx; padding-top:15rpx; font-weight: bold; font-size:34rpx;} .small{width:100%; height:60rpx; padding-top:5rpx; font-size:30rpx;}}
		.btn{width:140rpx; height:60rpx; line-height: 60rpx; margin-top:30rpx; text-align: center; border-radius: 40rpx; color:#b41009; background-color: #ffffff;}
		.btn:active{background-color: #e1dfdf;}
		.close{width:40rpx; height:40rpx; position: absolute; top:8rpx; right: 8rpx; image{width:100%; height:100%;}}
	}
	.dialog{width:100%; height:100%;
		.meng{width:100%; height:100%; background-color: #000000; opacity: 0.5; position: fixed; top:0rpx; left:0rpx; z-index:2;}
		.care{width:500rpx; height:830rpx; position: fixed; top:calc(50vh - 360rpx); left:125rpx; z-index:3;
			.close{width:60rpx; height:60rpx; float:right; image{width:100%;height: 100%;}}
			.ewm{width:500rpx; height:616rpx; float:left; image{width:100%; height:100%; margin-top:20rpx; border-radius: 0rpx; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx;}}
			.btnlist{width:100%; height:120rpx; float:left; background-color: #ffffff; border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx;
				.btn{width:300rpx; height:80rpx; line-height: 80rpx; margin-left:100rpx; margin-top:10rpx; margin-bottom: 40rpx; border-radius: 10rpx; text-align: center; background-color: #b41009; color:#ffffff; float:left; }
				.btn:active{background-color: #db2921;}
			}
		}
	}
</style>
